<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <span>{{ tableTitle }}</span>
        <a-select
          style="margin-left: 10px; width: 150px"
          :options="options"
          v-model:value="optionsValue"
          @change="handleChange"
        />
      </template>
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
  import { defineProps, ref, onMounted } from 'vue';
  import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';
  import { Select as ASelect } from 'ant-design-vue';
  import {
    eventERRORTableSchema,
    eventLC_EVENTTableSchema,
    eventSTATSTableSchema,
    eventERRORFormSchema,
    eventLC_EVENTFormSchema,
    eventSTATSFormSchema,
  } from './index.data';
  import { getEvents } from '/@/api/thingsborad/entity/entity';
  import {
    publicDrawerTableFormStyleSetting,
    tableStyleSetting,
  } from '/@/settings/thingsBoardDesign';
  import dayjs from 'dayjs';

  const props = defineProps({
    isComponent: {
      type: Boolean,
      default: true,
    },
    entityType: {
      type: String,
      default: '',
    },
    entityId: {
      type: String,
      default: '',
    },
    tenantId: {
      type: String,
    },
  });
  const options = ref<Array<any>>([
    { label: '错误', value: 'ERROR' },
    { label: '生命周期事件', value: 'LC_EVENT' },
    { label: '类型统计', value: 'STATS' },
  ]);
  const optionsValue = ref<string>('');
  const tableTitle = ref<string>('错误');
  const [registerTable, { setProps, reload }] = useTable({
    ...tableStyleSetting,
    fetchSetting: {
      pageField: 'page',
      sizeField: 'pageSize',
      listField: 'data',
      totalField: 'totalElements',
    },
    pagination: { pageSizeOptions: ['10', '20', '30'] },
  });

  // 事件表格切换
  const handleEvent = (val) => {
    let searchFormSchema: FormSchema[] = [];
    let columns: BasicColumn[] = [];
    let actionColOptions = {};
    switch (val) {
      case 'ERROR':
        tableTitle.value = '错误';
        columns = eventERRORTableSchema;
        searchFormSchema = eventERRORFormSchema;
        actionColOptions = {
          md: { span: 24, offset: 0 },
          lg: { span: 8, offset: 8 },
          xl: { span: 24, offset: 0 },
          xxl: { span: 24, offset: 0 },
        };
        break;
      case 'LC_EVENT':
        tableTitle.value = '生命周期事件';
        columns = eventLC_EVENTTableSchema;
        searchFormSchema = eventLC_EVENTFormSchema;
        actionColOptions = {
          md: { span: 12, offset: 0 },
          lg: { span: 8, offset: 0 },
          xl: { span: 6, offset: 12 },
          xxl: { span: 6, offset: 12 },
        };
        break;
      case 'STATS':
        tableTitle.value = '类型统计';
        columns = eventSTATSTableSchema;
        searchFormSchema = eventSTATSFormSchema;
        actionColOptions = {
          md: { span: 24, offset: 0 },
          lg: { span: 24, offset: 0 },
          xl: { span: 6, offset: 6 },
          xxl: { span: 6, offset: 6 },
        };
        break;
    }
    setProps({
      columns,
      formConfig: {
        layout: 'horizontal',
        schemas: searchFormSchema,
        showAdvancedButton: false,
        ...publicDrawerTableFormStyleSetting,
        actionColOptions,
      },
    });
    reload();
  };

  const handleChange = (val) => {
    handleEvent(val);
  };

  onMounted(() => {
    optionsValue.value = 'ERROR';
    setProps({
      api: getEvents,
      columns: eventERRORTableSchema,
      beforeFetch: (val) => {
        return {
          pageParameters: {
            page: val.page - 1,
            pageSize: val.pageSize,
            sortOrder: val.order == 'ascend' ? 'ASC' : 'DESC',
            sortProperty: val.field,
            startTime: val.timeRange
              ? dayjs(val.timeRange[0]).valueOf()
              : new Date().getTime() - 12 * 60 * 1000,
            endTime: val.timeRanfe ? dayjs(val.timeRange[1]).valueOf() : new Date().getTime(),
          },
          tenantId: props.tenantId,
          entityType: props.entityType,
          entityId: props.entityId,
          eventType: optionsValue.value,
        };
      },
      formConfig: {
        layout: 'horizontal',
        schemas: eventERRORFormSchema,
        showAdvancedButton: false,
        ...publicDrawerTableFormStyleSetting,
        actionColOptions: {
          md: { span: 24, offset: 0 },
          lg: { span: 8, offset: 8 },
          xl: { span: 24, offset: 0 },
          xxl: { span: 24, offset: 0 },
        },
      },
    });
    // console.log('aa');
    // reload({ sortInfo: { field: 'createdTime', order: 'DESC' } });
  });
</script>
